<template>
  <div>
    <el-table :data="data" stripe>
      <el-table-column v-for="(col, index) in tableCols" :key="index" v-bind="col" />

      <template #empty>
        <el-empty description="暂无数据" />
      </template>
    </el-table>

    <div class="mt-4 flex justify-end">
      <el-pagination
        v-model:current-page="tableCurrentPage"
        v-model:page-size="tablePageSize"
        :page-sizes="tableSizeList"
        background
        layout="total,sizes, prev, pager, next"
        :total="tableTotal"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import type { WTabelProps } from '@/types/WLib'

const props = withDefaults(defineProps<WTabelProps>(), {
  tableTotal: 0,
  tablePageSize: 10,
  tableCurrentPage: 1,
  tableSizeList() {
    return [10, 20, 30, 40]
  },
})

const { tablePageSize, tableCurrentPage } = props

const { data, tableCols, tableTotal, tableSizeList } = toRefs(props)

const emit = defineEmits(['update:tablePageSize', 'update:tableCurrentPage'])
const handleCurrentChange = (val: number) => {
  emit('update:tableCurrentPage', val)
}

const handleSizeChange = (val: number) => {
  emit('update:tablePageSize', val)
}
</script>

<style lang="scss" scoped></style>
